<div class="card" xmlns:shiro="http://www.w3.org/1999/xhtml">
    <div data-th-include="product/dishesAdd"></div>
    <div class="card-block">
        <div class="table-responsive">
            <div id="data-table_wrapper" class="dataTables_wrapper">
                <div class="dataTables_buttons hidden-sm-down actions">
                    <span class="actions__item zmdi zmdi-search" onclick="search()" title="搜索" />
                    <span class="actions__item zmdi zmdi-refresh-alt" onclick="refresh()" title="刷新" />
                    <div class="dropdown actions__item" shiro:hasAnyPermissions="dishes:add,dishes:delete">
                        <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="javascript:void(0)" class="dropdown-item" id="dishesAddBtn" shiro:hasPermission="dishes:add">新增菜品</a>
                            <a href="javascript:void(0)" class="dropdown-item" onclick="deleteDishes()" shiro:hasPermission="dishes:delete">下架菜品</a>
                        </div>
                    </div>
                </div>
                <div id="data-table_filter" class="dataTables_filter">
                    <form class="dishes-table-form">
                        <div class="row">
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <span class="input-group-addon"> 菜品名： </span>
                                    <div class="form-group">
                                        <input type="text" name="spareNameSearch" class="form-control"> <i class="form-group__bar"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <span class="input-group-addon"> 英文名： </span>
                                    <div class="form-group">
                                        <input type="text" name="spareNameEnSearch" class="form-control"> <i class="form-group__bar"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <span class="input-group-addon"> 状态： </span>
                                    <div class="form-group">
                                        <select class="form-control" name="spareStatusSearch">
                                            <option value="" selected>所有</option>
                                            <option value="SHELVES">已上架</option>
                                            <option value="UNSHELVES">已下架</option>
                                            <option value="SELLOUT">已售罄</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <span class="input-group-addon"> 分类： </span>
                                    <div class="form-group">
                                        <select class="form-control"  id="categoryIdSearch" name="categoryIdSearch">

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <span class="input-group-addon">
					               	创建日期：
					            </span>
                                    <div class="form-group">
                                        <input type="text" name="dishesFieldSearch" class="form-control">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <table id="dishesTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="dishesUpload">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h3 class="modal-title pull-left" id="dishes-upload-modal-title">上传图片</h3>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <form id="dishes-upload-form">
                    <div class="row">
                        <div class="col-sm-11">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    菜品图片：
					             </span>
                                <input type="text" hidden name="spareId" id="uploadSpareId" class="form-control">
                                <div class="file-container" id="wrapper">
                                    <input id="dishesFileUpload" type="file"/><br/>
                                    <div id="dishesImage-holder"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-save" id="dishes-upload-button" name="save">上传
                </button>
                <button type="button" class="btn btn-secondary btn-close" id="dishes-upload-closeButton" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
<script data-th-src="@{js/app/product/dishes.js}"></script>


<style>
    .file-container {
        box-sizing: border-box;
        width: 100%;
        padding: 1em;
        margin-bottom: 15px;
        border: 1px solid #e2e2e2;
        overflow: hidden;
    }
</style>
